/**
 * 会员卡套餐的Route Component
 * @author: zxy
 * @update: 2017-03-13
 */

import React, {PropTypes} from 'react';
import {connect} from 'dva';
import StoreSettingMenu from '../../components/StoreSetting/StoreSettingMenu';
import MemberCardList from '../../components/MemberCard/MemberCardList';
import StoreSettingTab from '../../components/StoreSetting/StoreSettingTab';
import MemberCardModal from '../../components/MemberCard/MemberCardModal'

function MemberCard({location, dispatch, memberCard}) {

  const {
    total, pageNumber, loading, pageSize,
    list, modalVisible, modalLoading, modalType, btnLoading,
    query, item,
  } = memberCard;

  // 会员卡列表props
  const MemberCardListProps = {
    total, pageNumber, loading, pageSize,
    dataSource: list,

    onPageChange(page) {
      dispatch({
        type: 'memberCard/query',
        payload: {
          pageNumber: page,
          pageSize,
        },
      });
    },

    onShowSizeChange(current, pageSize) {
      dispatch({
        type: 'memberCard/query',
        payload: {
          pageNumber: current,
          pageSize,
        },
      });
    },

    // 添加会员卡套餐
    onAdd() {
      dispatch({
        type: 'memberCard/showModal',
      })
    },

    // 编辑会员卡套餐
    onEditItem(id) {
      dispatch({
        type: 'memberCard/detail',
        payload: {
          modalType: 'update',
          id,
        },
      });
    },

    // 删除会员卡套餐
    onDeleteItem(id) {
      dispatch({
        type: 'memberCard/delete',
        payload: {
          id,
          pageNumber: pageNumber,
          pageSize: pageSize
        },
      });
    },
  }

  // 会员卡套餐modal的props
  const MemberCardModalProps = {
    title: modalType === 'create' ? '添加会员卡套餐' : '编辑会员卡套餐',
    item: modalType === 'create' ? {} : item,
    visible: modalVisible,
    modalLoading,
    btnLoading,
    onCancel(){
      dispatch({
        type: 'memberCard/hideModal',
      })
    },
    onOkAndAdd(formData, fn) {
      dispatch({
        type: `memberCard/${modalType}`,
        payload: {
          formData,
          fn,
          pageNumber: 1,
          pageSize,
        }
      });
    },
    onOk(formData, fn) {
      dispatch({
        type: `memberCard/${modalType}`,
        payload: {
          formData,
          fn,
          pageNumber: 1,
          pageSize,
        }
      });
    },
  }

  return (
    <div className="page-wrap">
      <StoreSettingMenu current={location.pathname}/>
      <div className="page-content">
        <StoreSettingTab current={location.pathname}/>
        <MemberCardList {...MemberCardListProps}/>
        <MemberCardModal {...MemberCardModalProps}/>
      </div>
    </div>
  );
}

MemberCard.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  storeInfo: PropTypes.object,
};

export default connect(({memberCard}) => ({memberCard}))(MemberCard);